<template>
  <div>
    <!-- <Son ref="sonRef" :count="num" @add="num++" @addN="num+=$event" /> -->
    <Son ref="sonRef" v-model="num" />
    <div>token={{ $store.state.user.token }}</div>
    <tom />
    <jerry />
  </div>
</template>

<script>
/**
 * 方式1-父子通信
  1.父到子通过v-bind传数据,子组件通过props来接收
  2.子到父,通过$emit发消息,父组件通过v-on进行监听,通过$emit可以传数据,父组件通过$event来接收

 * 方式2-父子通信
  1.父组件通过ref得到子组件实例,可以直接调用子组件的方法
  <Son ref="sonRef" :count="num" @add="num++"@addN="num+=$event" /> ==> 语法糖v-model,用于简化父模板
  2.v-model="num"等效于:value="num" @input="num=$event"
  < Son ref="sonRef" V-model="num" >
 * 方式3-兄弟通信

 */
import Son from './components/Son.vue'
import Tom from './components/Tom.vue'
import Jerry from './components/Jerry.vue'
export default {
  name: 'LearnComp',
  components: {
    Son,
    Tom,
    Jerry
  },
  data() {
    return {
      num: 0
    }
  },
  mounted() {
    this.$refs.sonRef.focusInput()
  },
  methods: {
    setToken() {
      // 方式1-调用模块当中的mutations
      this.$store.commit('user/setToken', '123')
    }

  }

}
</script>

<style>

</style>
